<template>
  <div class="product-categories">
    <h1>商品分类</h1>
    <ul class="category-list">
      <li v-for="category in categories" :key="category.id" @click="selectCategory(category)">
        {{ category.name }}
      </li>
    </ul>
    <div class="selected-products" v-if="selectedCategory">
      <h2>商品列表 - {{ selectedCategory.name }}</h2>
      <div v-for="product in selectedCategory.products" :key="product.id" class="product-item">
        <img :src="product.image" alt="Product Image" class="product-image" @click="goToProductDetail(product.id)">
        <div class="product-details">
          <h3>{{ product.name }}</h3>
          <p>价格: {{ product.price }}</p>
          <p>描述: {{ product.description }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categories: [
        { id: 1, name: '电子产品', products: [{ id: 1, name: '笔记本电脑', price: '¥5000', description: '高性能笔记本电脑', image: '../../img/1.png' }, { id: 2, name: '智能手机', price: '¥3000', description: '新款智能手机', image: '../../img/2.png' }] },
        { id: 2, name: '服装', products: [{ id: 3, name: 'T恤', price: '¥100', description: '纯棉T恤', image: '../../img/3.png' }, { id: 4, name: '牛仔裤', price: '¥200', description: '经典牛仔裤', image: '../../img/4.png' }] },
        { id: 3, name: '家用电器', products: [{ id: 5, name: '空调', price: '¥100', description: '美的空调', image: '../../img/5.png' }, { id: 6, name: '热水器', price: '¥200', description: '海尔热水器', image: '../../img/6.png' }] },
        { id: 4, name: '母婴产品', products: [{ id: 7, name: '奶粉', price: '¥150', description: '飞鹤', image: '../../img/7.png' }, { id: 8, name: '纸尿裤', price: '¥200', description: '官方进口花王妙而舒纸尿裤', image: '../../img/8.png' }] },
        { id: 5, name: '家具', products: [{ id: 9, name: '儿童家具', price: '¥150', description: '红木', image: '../../img/9.png' }, { id: 10, name: '办公家具', price: '¥200', description: '办公椅子', image: '../../img/10.png' }] },
        { id: 6, name: '运动', products: [{ id: 11, name: '男休闲鞋', price: '¥150', description: 'adidas', image: '../../img/11.png' }, { id: 12, name: '女休闲鞋', price: '¥200', description: 'nike', image: '../../img/12.png' }] }
       
      ],
      selectedCategory: null
    };
  },
  methods: {
    selectCategory(category) {
      this.selectedCategory = category;
    },
    goToProductDetail(productId) {
      this.$router.push({ name: 'ProductDetail', params: { id: productId } });


  }
  }

};
</script>

<style scoped>
.product-categories {
  padding-top: 50px;
  width: 80%;
  margin: auto;
}

.category-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.category-list li {
  cursor: pointer;
  padding: 10px;
  background-color: #f9f9f9;
  margin-bottom: 5px;
  border-radius: 5px;
  text-align: center;
}

.category-list li:hover {
  background-color: #e0e0e0;
}

.selected-products {
  margin-top: 20px;
}

.selected-products h2 {
  color: #333;
}

.product-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  cursor: pointer; /* 鼠标悬停时显示为可点击 */
}

.product-item:hover {
  background-color: #f0f0f0; /* 鼠标悬停时的背景色 */
}
.product-image {
  width: 100px;
  height: 100px;
  margin-right: 20px;
}

.product-details h3 {
  margin: 0;
}

.product-details p {
  margin: 5px 0;
}
</style>